<template>
  <div id="listInfo">
    <mt-header fixed title="审批列表详情" style="height: 0.64rem;">
      <router-link to="" slot="left">
        <mt-button icon="back"  @click="$router.go(-1)">返回</mt-button>
      </router-link>
      <mt-button class="mint-button-text" slot="right" @click="action('sh_confirm')">审核历史</mt-button>
    </mt-header>
    <div class="content">
      <!-- 商品信息-->
      <!-- 加载数据-->
      <div class="loadmore" ref="List">
        <ul class="d-ul-box">
          <li class="d-li-box" v-for="(detail,index) in detailList" :key="index">

            <div class="d-list-box">
              <div class="d-list-line">
                <div class="line-left">商品名称</div>
                <div class="line-right bottom-line">{{detail.pro_name}}</div>
              </div>
              <div class="d-list-line">
                <div class="section-left">
                  <label>商品规格</label><span class="right-value bottom-line">{{detail.pro_guige}}</span>
                </div>
                <div class="section-right">
                  <label>单位</label><span class="right-value bottom-line">{{detail.pro_danwei}}</span>
                </div>
              </div>
              <div class="d-list-line">
                <div class="line-left">生产厂家</div>
                <div class="line-right bottom-line">{{detail.pro_manufactor}}</div>
              </div>
              <div class="d-list-line">
                <div class="section-left">
                  <label class="left-label">数量</label><span class="right-value  bottom-line">{{detail.pro_shengou_shuliang}}</span>
                </div>
                <div class="section-right">
                  <label class="left-label">单价</label><span class="right-value  bottom-line">{{detail.pro_danjia}}</span>
                </div>
              </div>
            </div><!-- d-list-box -->


          </li>
        </ul>
      </div>


    </div>

  </div>
</template>

<script>

  // import axios from 'axios';
  // import {MessageBox} from 'mint-ui';
  import  * as constantutils from '../../utils/constantutils'
  export default {
    name: 'page-navbar',
    data() {
      return {
        selected: '1'
      }

    },
    methods: {
      action(act) {
        console.log('action /tool/audithistory ');

        this.$router.push({name:'audithisotry',params:this.auditHistoryList});
      }
    },
    computed: {
      //审批历史商品明细
      detailList() {
        return this.$store.state.medicalPurchasePendingDetail.detailList;
      },
      //审批历史列表
      auditHistoryList() {
        let type = this.$route.params.type;
        if(type == constantutils.TYPE_RECORD){ //备案显示的是备案单的审批列表
          return this.$store.state.medicalPurchasePendingDetail.recordList;
        }
        return this.$store.state.medicalPurchasePendingDetail.examList;
      }
    },
    mounted() {
      //获取路由参数
      console.log(this.$route.params);
      let params = this.$route.params;
      this.$store.dispatch('getMedicalPurchaseDetail', params);
    }
  }

</script>
<style scoped>
  .content {
    margin-top: 0.64rem;
    height: auto;
    background: #e3e3e3;
  }

  .d-ul-box {
  }

  .d-li-box {
    font-size: 0.13rem;
    color: #363636;
    background: #fff;
    margin-bottom:0.08rem;
  }

  .d-list-box {
  }

  .d-list-line {
    display: flex;
    height: 0.30rem;
    line-height: 0.30rem;
    padding-right: 0.04rem;
  }

  .line-left {
    width: 0.78rem;
    padding-left: 0.15rem;
  }

  .line-right {
    flex: 1;
    padding-left: 0.05rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .section-left {
    flex: 1;
    padding-left: 0.15rem;
  }

  .section-right {
    flex: 1;
  }

  .d-list-line .line-right {
  }

  .d-list-line .line-left {
  }

  .section-left label, .section-right label {
  }

  .section-left span, .section-right span {
    margin-left: 0.15rem;
    padding-left: 0.05rem;
    width: 1rem;
    display: inline-block;
  }

  .left-label {
  }

  .right-value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  .bottom-line {
    border-bottom: 1px solid #ececec;
  }


</style>
